$baseFont: 37.5;

@function parseInt($n) {
  @return $n / ($n * 0 + 1); /* 2 */
}

@function rem($px) {
  $list: ();
  @each $item in $px {
    @if $item == 0 or $item == auto {
      $list: append($list, $item);
    } @else {
      $unit: unit($item);
      $val: parseInt($item);

      @if $unit == px {
        $list: append($list, ($val / $baseFont + rem))
      }

      @if $unit == rem {
        $list: append($list, $item);
      }
    }
  }
  @return $list;
}

@import "mixin";
@import "footer";

@mixin view-more {
  font-size: rem(14px);
  color: #999999;
  &:after {
    content: '';
    display: inline-block;
    vertical-align: text-bottom;
    width: rem(8px);
    height: rem(12.5px);
    @include bg-image('../images/arrow-right');
    background-repeat: no-repeat;
  }
}

.switches {
  position: fixed;
  top: 0;
  width: 100%;
  height: rem(45px);
  z-index: 10;
  >.switches-wrapper {
    padding: rem(8px) 0;
    background-color: #fff;
    font-size: 0;
    text-align: center;
    @include border-bottom-1px(#e5e5e5);
    >li {
      display: inline-block;
      vertical-align: middle;
      width: rem(100px);
      height: rem(29px);
      line-height: rem(29px);
      background-color: #fff;
      border: rem(1px) solid #dc3838;
      border-radius: rem(4px) 0 0 rem(4px);
      font-size: rem(12px);
      color: #dc3838;
      &.active {
        border: none;
        background-color: #dc3838;
        color: #ffffff;
      }
      &:nth-child(2) {
        border-radius: 0 rem(4px) rem(4px) 0;
      }
    }
  }
}

.tabs {
  position: fixed;
  top: rem(45px);
  bottom: rem(80px);
  width: 100%;
  height: rem(35px);
  background-color: #fafafa;
  overflow: hidden;
  z-index: 10;
  >.nav-swiper-container {
    >.swiper-wrapper {
      >.swiper-slide {
        float: left;
        display: inline-block;
        box-sizing: border-box;
        width: auto;
        height: rem(35px);
        padding: 0 rem(15px);
        line-height: rem(35px);
        font-size: rem(14px);
        color: #999999;
        &.active {
          color: #dc3838;
        }
      }
    }
  }
}

.block-tj {
  margin-top: rem(80px);
  >.block-header {
    @include border-bottom-1px(#e5e5e5);
    >h3 {
      >.view-more {
        float: right;
        @include view-more()
      }
    }
  }
  >.tj-wrapper {
    >.tj-item {
      padding: rem(13px) rem(16px);
      width: 100%;
      height: rem(135px);
      background-color: #ffffff;
      @include border-bottom-1px(#e5e5e5);
      font-size: 0;
      >a {
        display: flex;
        width: 100%;
        height: 100%;
        >.tj-item-left {
          padding-right: rem(16px);
          flex: 0 0 rem(128px);
          width: rem(128px);
          height: rem(109px);
          border-right: rem(1px) solid #e5e5e5;
          >.plat-logo-wrapper {
            position: relative;
            padding-top: 20px;
            width: 100%;
            height: rem(55px);
            >img {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          >.plat-tag-wrapper {
            width: 100%;
            height: rem(32px);
            text-align: center;
            >.plat-tag {
              display: inline-block;
              padding: rem(4px) rem(8px);
              background-color: #0084ff;
              border-radius: rem(16px);
              >.icon-currency {
                margin-right: rem(5px);
                display: inline-block;
                vertical-align: middle;
                width: rem(16px);
                height: rem(15px);
                @include bg-image('../images/icon-currency')
              }
              >span {
                display: inline-block;
                vertical-align: middle;
                font-size: rem(10px);
                color: #ffffff;
              }
            }
          }
          >.tag-msg {
            >p {
              text-align: center;
              font-size: rem(12px);
              color: #333333;
            }
          }
        }
        >.tj-item-right {
          flex: 1;
          padding-left: rem(20px);
          >.plat-info-header {
            position: relative;
            width: 100%;
            height: rem(45px);
            >.plat-name {
              font-size: rem(17px);
              line-height: rem(22px);
              color: #333333;
            }
            >.plat-plan {
              position: absolute;
              right: 0;
              top: 0;
              width: rem(87px);
              height: rem(22px);
              line-height: rem(22px);
              text-align: center;
              border-radius: rem(22px);
              background-color: #dc3838;
              font-size: rem(12px);
              color: #ffffff;
            }
            >.tag-wrapper {
              padding-top: rem(5px);
              >.tag {
                margin: 0 rem(2px);
                border: rem(1px) solid #dc3838;
                border-radius: rem(2px);
                padding: 0 rem(2px);
                font-size: rem(12px);
                color: #dc3838;
              }
            }
          }
          >.plat-info-body {
            >li {
              display: flex;
              line-height: rem(21px);
              >.left {
                flex: 0 0 rem(50px);
                width: rem(50px);
                font-size: rem(12px);
                color: #666666;
              }
              >.right {
                padding-left: rem(10px);
                flex: 1;
                font-size: rem(12px);
                color: #333333;
                &.dc3838 {
                  color: #dc3838;
                }
              }
            }
          }
        }
      }
      >.plat-sign1 {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: rem(50px);
        height: rem(50px);
        @include bg-image("../images/m-index-platform-tag1");
      }
      >.plat-sign2 {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: rem(50px);
        height: rem(50px);
        @include bg-image("../images/m-index-platform-tag2");
      }
    }
  }
}
